<!DOCTYPE html>
<HTML>
<HEAD><meta name="viewport" content="width=device-width, initial-scale=1">
<Title>Compact Line Chart</Title>
<link type='text/css' rel='Stylesheet' href="maxchartapi.css" />
</HEAD>
<body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">

<p class="heading0">ChartDirector 7.0 (Java Edition)</p>
<p class="heading1">Compact Line Chart</p>
<hr class="separator">
<div class="content">
<img src="images/compactline.png" width='180' height='180'>
<br><br>
This example extends the <a href="simpleline.htm">Simple Line Chart</a> example by decorating the chart using a number of chart formatting features.<br><br>
In this example, random data is used. They are generated using a ChartDirector utility class <a href="RanTable.htm">RanTable</a>. RanTable simulates a database table with the cells filled with random numbers. The columns of the table can be retrieved as arrays using <a href="RanTable.getCol.htm">RanTable.getCol</a>.<br><br>
<ul><li> Create an XYChart object with background color using <a href="XYChart.XYChart.htm">XYChart.XYChart</a>.<br><br>
<li> Add title boxes on top and bottom using <a href="BaseChart.addTitle.htm">BaseChart.addTitle</a> and <a href="BaseChart.addTitle2.htm">BaseChart.addTitle2</a>.<br><br>
<li> Set the background color of the plot area using <a href="PlotArea.setBackground.htm">PlotArea.setBackground</a>.<br><br>
<li> Add custom text at the top right corner of the plot area using <a href="BaseChart.addText.htm">BaseChart.addText</a>.<br><br>
<li> Distribute the text labels on the x-axis evenly using <a href="Axis.setLinearScale.htm">Axis.setLinearScale</a><br><br>
<li> Set the label fonts on the axes using <a href="Axis.setLabelStyle.htm">Axis.setLabelStyle</a>.</ul>
</div>
<p class="heading1a">Source Code Listing</p>
<div class="content">
<b>[JSP Version]</b> jspdemo/compactline.jsp
<div class='codeblock'><code class='pre'>&lt;%@page import="ChartDirector.*, java.util.*" %&gt;
&lt;%
//
//    We use a random number generator to simulate the data from 9:30am to 4:30pm with one data
//    point every 4 minutes. The total number of points during that period is 106.  (7 hours x 15
//    points/hour + 1)
//
int noOfPoints = 106;

// Assume we have not reached the end of the day yet, and only 85 points are available. Create a
// random table object of 1 col x 85 rows, using 9 as seed.
RanTable rantable = new RanTable(9, 1, 85);

// Set the 1st column to start with 1800 and with random delta from -5 to 5.
rantable.setCol(0, 1800, -5, 5);

// Get the data as the 1st column of the random table
double[] data = rantable.getCol(0);

// The x-axis labels for the chart
String[] labels = {"-", "10am", "-", " ", "-", "12am", "-", " ", "-", "2pm", "-", " ", "-", "4pm",
    "-"};

//
//    Now we obtain the data into arrays, we can start to draw the chart using ChartDirector
//

// Create a XYChart object of size 180 x 180 pixels with a blue background (0x9c9cce)
XYChart c = new XYChart(180, 180, 0x9c9cce);

// Add titles to the top and bottom of the chart using 7.5pt Arial font. The text is white 0xffffff
// on a deep blue 0x31319C background.
c.addTitle2(Chart.Top, "STAR TECH INDEX  2003-01-28", "Arial", 7.5, 0xffffff, 0x31319c);
c.addTitle2(Chart.Bottom, "LATEST  STI:1809.41 (+14.51)", "Arial", 7.5, 0xffffff, 0x31319c);

// Set the plotarea at (31, 21) and of size 145 x 124 pixels, with a pale yellow (0xffffc8)
// background.
c.setPlotArea(31, 21, 145, 124, 0xffffc8);

// Add custom text at (176, 21) (top right corner of plotarea) using 11pt Times Bold Italic font/red
// (0xc09090) color
c.addText(176, 21, "Chart Demo", "Times New Roman Bold Italic", 11, 0xc09090).setAlignment(
    Chart.TopRight);

// Use 7.5pt Arial as the y axis label font
c.yAxis().setLabelStyle("", 7.5);

// Set the labels on the x axis by spreading the labels evenly between the first point (index = 0)
// and the last point (index = noOfPoints - 1)
c.xAxis().setLinearScale(0, noOfPoints - 1, labels);

// Use 7.5pt Arial as the x axis label font
c.xAxis().setLabelStyle("", 7.5);

// Add a deep blue (0x000080) line layer to the chart
c.addLineLayer(data, 0x000080);

// Output the chart
WebChartViewer viewer = new WebChartViewer(request, "chart1");
viewer.setChart(c, Chart.SVG);

// Include tool tip for the chart. The chart starts at 9:30am and each point spans 240 seconds, so
// we can compute the time as {x}*240+9.5*3600.
viewer.setImageMap(c.getHTMLImageMap("", "", "title='{={x}*240+9.5*3600|h:nna}: {value|2}'"));
%&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Compact Line Chart&lt;/title&gt;
    &lt;!-- Include ChartDirector Javascript Library to support chart interactions --&gt;
    &lt;script type="text/javascript" src="cdjcv.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body style="margin:5px 0px 0px 5px"&gt;
    &lt;div style="font:bold 18pt verdana;"&gt;
        Compact Line Chart
    &lt;/div&gt;
    &lt;hr style="border:solid 1px #000080; background:#000080" /&gt;
    &lt;div style="font:10pt verdana; margin-bottom:1.5em"&gt;
        &lt;a href="viewsource.jsp?file=&lt;%=request.getServletPath()%&gt;"&gt;View Source Code&lt;/a&gt;
    &lt;/div&gt;
    &lt;!-- ****** Here is the chart image ****** --&gt;
    &lt;%= viewer.renderHTML(response) %&gt;
&lt;/body&gt;
&lt;/html&gt;</code></div>
</div>
<br><hr class="separator"><div class="copyright">&copy; 2022 Advanced Software Engineering Limited. All rights reserved.</div>
</body>
</HTML>
